<template>
    <div class="otherWarp">
        <div class="bannerWarp">
            <div class="researchName">
                <h1>{{title || otherUserInfo.username||userInfo.name}}</h1>
            </div>
            <!-- <div class="researchClass">
                <el-input placeholder="请输入内容" size="medium" v-model="search" class="input-with-select">
                    <el-select style="width:110px;" v-model="select" slot="prepend" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click.native="globalSearch('open')"></el-button>
                </el-input>
            </div>
            <div class="searchScroll" v-if="globalSearchP">
                <ul class="infinite-list" v-infinite-scroll="globalSearch" :infinite-scroll-immediate="false"
                    :infinite-scroll-delay='15'>
                    <li>
                        <el-row>
                            <el-col :span="6" :offset="18"><label>
                                    <el-button type="text" @click.native="goGlobal('close')">关闭</el-button>
                                </label></el-col>
                        </el-row>
                    </li>
                    <li v-for="(item,index) in globalSearchData" class="infinite-list-item" :key="index"
                        @click.native="goGlobal(item)">
                        <el-row>
                            <el-col :span="18">{{item.title}}</el-col>
                            <el-col :span="6"><label>{{item.type | roleTypeToName}}</label></el-col>
                        </el-row>
                    </li>
                </ul>
            </div> -->
            <swiper :options="swiperOption" v-if="imgList.length>0" ref="mySwiper">
                <swiper-slide v-for="(item, index) in imgList" :key="index">
                    <img :src="item.imgUrl" :title="item.id" style="width:100%" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>

        <div class="mainWarp">
            <div class="module">
                <div class="title">
                    <label>教研活动</label>
                    <i class="el-icon-more"
                        @click="$router.push({path:'/research/researchOther/researchOtherActivity'})"></i>
                </div>
                <!-- 课例研讨 -->
                <div class="lineTitle">
                    <label>课例研讨</label>
                </div>

                <div class="moduleList">
                    <el-row :gutter="20">
                        <el-col :span="4" v-for="(item, index) in activityPageList101.list" :key="index">
                            <div class="grid-content" @click="toResearchReadDetails(item,3,'researchOtherActivity')">
                                <div class="cover">
                                    <el-image :src="item.cover | pictureUrl" style="height:150px"></el-image>
                                </div>
                                <label class="listName">{{item.title}}</label>
                                <span>{{item.createTime.slice(0,19)}}</span>
                                <label class="haveinhand">{{item.state}}</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="empty1" v-if="activityPageList101.total == 0">
                    <i class="iconfont icon-icon"></i>
                    <label>暂无数据</label>
                </div>
            </div>

            <div class="module">
                <div class="lineTitle">
                    <label>主题研讨</label>
                </div>

                <div class="moduleList">
                    <el-row :gutter="20">
                        <el-col :span="4" v-for="(item, index) in activityPageList100.list" :key="index">
                            <div class="grid-content" @click="toResearchReadDetails(item,3,'researchOtherActivity')">
                                <div class="cover">
                                    <el-image :src="item.cover | pictureUrl" style="height:150px"></el-image>
                                </div>
                                <label class="listName">{{item.title}}</label>
                                <span class="listName">{{item.createTime.slice(0,19)}}</span>
                                <label class="haveinhand">{{item.state}}</label>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="empty1" v-if="activityPageList100.total == 0">
                    <i class="iconfont icon-icon"></i>
                    <label>暂无数据</label>
                </div>
            </div>
        </div>
        <!-- 教研组 -->
        <div class="columns">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="columnsWarp">
                        <div class="title">
                            <label>教研组</label>
                            <i class="el-icon-more"
                                @click="$router.push({path:'/research/researchOther/researchOtherGroup'})"></i>
                        </div>
                        <div class="lineBanner">
                            <swiper :options="swiperOptionMultiple" ref="mySwiper">
                                <swiper-slide v-for="(item, index) in groupPagelist.list" :key="index">
                                    <div class="campusList" @click="toGroup(item)">
                                        <img :src="item.cover | pictureUrl" :title="item.organizationName"
                                            style="width: 100%;height:200px" />
                                        <p>{{item.title}}</p>
                                    </div>
                                </swiper-slide>
                                <div class="swiper-button-prev" slot="button-prev"></div>
                                <div class="swiper-button-next" slot="button-next"></div>
                            </swiper>
                        </div>
                        <div class="empty" v-if="groupPagelist.total == 0">
                            <i class="iconfont icon-icon"></i>
                            <label>暂无数据</label>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="columnsWarp">
                        <div class="title">
                            <label>活跃用户</label>
                            <!-- <i class="el-icon-more" @click="$router.push({path:'/research/researchOther/researchOtherGroup'})"></i> -->
                        </div>
                        <div class="lineBanner">
                            <div class="statisticsWarp">
                                <ul class="hotWarp">
                                    <li class="hotList" v-for="(item, index) in researchUserStatisP.list" :key="index">
                                        <div class="user">
                                            <span>{{index+1}}</span>
                                            <label>{{item.username}}</label>
                                            <label class="statisticsNum">{{item.count}}次</label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="empty3" v-if="groupPagelist.total == 0">
                            <i class="iconfont icon-icon"></i>
                            <label>暂无数据</label>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 教研成果 -->
        <div class="columns">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="columnsWarp" style="height: 442px;">
                        <div class="title">
                            <label>教研成果</label>
                            <i class="el-icon-more"
                                @click="$router.push({path:'/research/researchOther/researchachIevements'})"></i>
                        </div>
                        <ul class="colListWarp">
                            <li class="listBox" v-for="(item,index) in researchGainlist.list" :key="index"
                                @click="toResearchReadDetails(item,2,'researchachIevements')">
                                <div class="fruitTitle">
                                    <i class="diamond"></i>
                                    <label>{{item.title}}</label>
                                </div>
                                <div class="time">
                                    <label>{{item.creationtime}}</label>
                                </div>
                            </li>
                        </ul>
                        <div class="empty" v-if="researchGainlist.total == 0">
                            <i class="iconfont icon-icon"></i>
                            <label>暂无数据</label>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="statisticsWarp">
                        <div class="title">
                            <label>统计</label>
                        </div>
                        <div class="statistics">
                            <div class="lineTitle">
                                <label>访问统计</label>
                            </div>
                        </div>
                        <ul class="statisticsListBox">
                            <li class="statisticsList">
                                <label class="statisticsText">今日访问：</label>
                                <label class="statisticsNum">{{todayTotals}}</label>
                            </li>
                            <li class="statisticsList">
                                <label class="statisticsText">总访问量：</label>
                                <label class="statisticsNum">{{visitorTotals}}</label>
                            </li>
                        </ul>
                    </div>

                    <div class="otherStatistics">
                        <div class="lineTitle">
                            <label>其他统计</label>
                        </div>
                        <ul class="statisticsListBox">
                            <li class="statisticsList">
                                <label class="statisticsText">教研成果：</label>
                                <label class="statisticsNum">{{researchStatisP.resultnum}}</label>
                            </li>
                            <li class="statisticsList">
                                <label class="statisticsText">教研资料：</label>
                                <label class="statisticsNum">{{researchStatisP.resourcenum}}</label>
                            </li>
                            <li class="statisticsList">
                                <label class="statisticsText">研讨活动：</label>
                                <label class="statisticsNum">{{researchStatisP.activitynum}}</label>
                            </li>
                        </ul>

                    </div>


                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        created() {
            console.log(this.otherUserInfo)
            if(this.$route.query.others){
                this.title = this.$route.query.others.username
            }
            this.groupPage()
            this.researchGain()
            this.researchStatis()
            this.getVistorTotal('today')
            this.getVistorTotal('total')
            this.researchUserStatis()
            this.activityPage(100)
            this.activityPage(101)
        },
        data() {
            return {
                title:undefined,
                options: [{
                    value: '1',
                    label: '教研组'
                }, {
                    value: '2',
                    label: '教研相册'
                }, {
                    value: '3',
                    label: '活动'
                }, {
                    value: '4',
                    label: '成果'
                }, {
                    value: '5',
                    label: '资源'
                }],
                globalSearchP: false,
                search: '',
                select: "1",
                src: require('../../../assets/img/headportrait01.jpg'),
                swiperOption: {
                    loop: false,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 3,
                    centeredSlides: true,
                    effect: "fade",
                    paginationClickable: true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e) {}
                    }
                },
                swiperOptionMultiple: {
                    loop: false,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 5,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e) {}
                    }
                },
                imgList: [{
                        id: '001',
                        imgUrl: require("../../../assets/img/banner.jpg")
                    },
                    {
                        id: '002',
                        imgUrl: require("../../../assets/img/banner2.jpg")
                    },
                    {
                        id: '003',
                        imgUrl: require("../../../assets/img/banner3.jpg")
                    },
                    {
                        id: '004',
                        imgUrl: require("../../../assets/img/banner4.jpg")
                    }
                ],
                researchSearch: 0,
                groupPagelist: {},
                researchGainlist: {},
                researchStatisP: {},
                todayTotals: {},
                visitorTotals: {},
                researchUserStatisP: {},
                activityPageList100: {},
                activityPageList101: {}
            }
        },
        methods: {
            goGlobal(params) {
                if (params == 'close') {
                    this.search = ''
                    this.globalSearchP = false
                } else {
                    this.search = ''
                    this.globalSearchP = false
                    this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                    this.goSpaceOthers(params, params.type == 1 ? true : false)
                }
            },
            // 去他人空间
            goSpaceOthers(others) {
                this.$store.dispatch('commonModule/checkVisitor', {
                    userId: others.userid
                }).then(res => {
                    if (res.data.code == 200 || this.userInfo.id == others.userid) {
                        this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                        if (others) {
                            if (this.userInfo.id == others.userid) {
                                this.$store.commit('commonModule/INIT_ISMANAGER', true);
                            } else {
                                this.$store.commit('commonModule/INIT_ISMANAGER', false);
                            }
                            // 学校9527 班级1000 教研100011
                            if (others.roleid == 7) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/school/schoolHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 1000) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/class/classHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 100011) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/research/researchOther/researchOtherHome",
                                    query: {
                                        others: others
                                    }
                                });
                            } else {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/otherZone/otherZoneHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            }
                        }
                    } else {
                        this.$message.warning('没有访问权限!')
                    }
                })
            },
            globalSearch(params) {
                if (params == 'open') {
                    this.globalSearchData = []
                    this.globalSerachPage = 0
                }
                if (this.search == '') {
                    this.$message.warning("请先输入搜索内容！")
                } else {
                    this.globalSerachPage += 1
                    this.globalSearchP = true
                    this.$store.dispatch('researchModule/researchSearch', {
                        limit: 30,
                        page: this.globalSerachPage,
                        search: this.search,
                        userId: this.otherUserInfo.xxdm,
                        type: this.select
                    }).then(res => {
                        if (res && res.list.length > 0) {
                            this.globalSearchData.push(...res.list)
                            this.globalSearchP = true
                        } else if (this.globalSearchData.length < 1) {
                            this.globalSearchP = false
                        }
                    })
                }
            },
            toResearchReadDetails(params, type, routePath) {
                if (this.userInfo.id && this.otherUserInfo.userid && 
                this.userInfo.id != this.otherUserInfo.userid) {
                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                        fromuserid: this.otherUserInfo.userid,
                        visitorid: params.id,
                        type: type == 3?6:2
                    })
                }
                this.$router.push({
                    path: '/research/researchOther/researchReadDetails',
                    query: {
                        routePath: routePath,
                        article: params,
                        junmpType: type
                    }
                })
            },
            toGroup(item) {
                if (this.userInfo.id && item.id) {
                    if (this.userInfo.xxdm != item.organizationId) {
                        this.$store.dispatch('visitorAllModule/visitorAdd', {
                            fromuserid: item.id,
                            visitorid: item.id,
                            type: 4
                        })
                    }
                }
                this.$router.push({
                    path: '/research/researchGroup',
                    query: {
                        group: item
                    }
                })
                this.$store.commit('researchModule/INIT_GROUP', item)
            },
            activityPage(params) {
                this.$store.dispatch('researchModule/activityPage', {
                    dictype: params,
                    groupId: null,
                    organizationId: this.otherUserInfo.xxdm,
                    limit: 6,
                    page: 1,
                }).then(res => {
                    if (res) {
                        if (params == 100) {
                            this.activityPageList100 = res
                        } else {
                            this.activityPageList101 = res
                        }
                    }
                })
            },
            researchUserStatis() {
                this.$store.dispatch('researchModule/researchUserStatis', {
                    id: this.otherUserInfo.id || this.otherUserInfo.userid,
                    limit: 6,
                    page: 1,
                    type: 1
                }).then(res => {
                    if (res) {
                        this.researchUserStatisP = res
                    }
                })
            },
            // 获取访问数量
            getVistorTotal(params) {
                if (params == 'today') {
                    this.$store.dispatch('visitorAllModule/visitorPageToday', {
                        userId: this.otherUserInfo.id || this.otherUserInfo.userid
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.todayTotals = res.data.result.total
                        }
                    })
                } else {
                    this.$store.dispatch('visitorAllModule/visitorPageTotal', {
                        userId: this.otherUserInfo.id || this.otherUserInfo.userid
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.visitorTotals = res.data.result.total
                        }
                    })
                }
            },
            researchStatis(params) {
                this.$store.dispatch('researchModule/researchStatis', {
                    id: this.otherUserInfo.xxdm,
                    isGroup: false,
                }).then(res => {
                    if (res) {
                        this.researchStatisP = res
                    }
                })
            },
            researchGain() {
                this.$store.dispatch('articleModule/schoolArticleList', {
                    schoolid: this.otherUserInfo.xxdm,
                    classifyid: null,
                    dictype: '94',
                    draft: 1,
                    limit: 10,
                    page: 1,
                    search: null,
                    sortType: 0,
                    userid: null,
                    yearandmonth: null
                }).then(res => {
                    if (res.data.code == 200) {
                        this.researchGainlist = res.data.result
                    }
                })
            },
            groupPage() {
                this.$store.dispatch('researchModule/groupPage', {
                    organizationId: this.otherUserInfo.xxdm,
                    limit: 20,
                    page: 1,
                }).then(res => {
                    if (res) {
                        this.groupPagelist = res
                    }
                })
            }
            // search(){

            // },

        }
    }
</script>

<style lang="scss" scoped>
    .empty {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 100px 270px;;
        width: 200px;
        height: 135px;

        i {
            font-size: 48px;
        }

        label {
            font-size: 32px;
            display: block;
            width: 200px;
            margin: 0 auto;
        }
    }
    .empty1 {
        position: absolute;
        // top: 0;
        // left: 0;
        // bottom: 0;
        // right: 0;
        margin: 50px 350px;
        width: 200px;
        height: 135px;

        i {
            font-size: 48px;
        }

        label {
            font-size: 32px;
            display: block;
            width: 200px;
            margin: 0 auto;
        }
    }
    .empty3 {
        position: absolute;
        top: 0;
        bottom: 0;
        right: -105px !important;
        margin: 100px 200px;
        width: 200px;
        height: 135px;

        i {
            font-size: 48px;
        }

        label {
            font-size: 32px;
            display: block;
            width: 200px;
            margin: 0 auto;
        }
    }
    .hotWarp {
        list-style-type: none;
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
        margin-top: 10px;

        .hotList {
            height: 40px;
            line-height: 40px;

            .user {
                float: left;
                color: #303133;
                font-size: 14px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: left;

                .statisticsNum {
                    margin-right: 10px;
                    float: right;
                }

                span {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    color: white;
                    text-align: center;
                    background-color: #909399;
                    margin-right: 6px;
                }
            }
        }

        .hotList:nth-child(1) .user>span,
        .hotList:nth-child(2) .user>span,
        .hotList:nth-child(3) .user>span {
            background-color: #409EFF;
        }
    }

    .otherWarp {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0;

        .bannerWarp {
            overflow: hidden;
            width: 100%;
            background: #ccc;
            position: relative;

            .researchName {
                box-sizing: border-box;
                border-radius: 10px;
                padding: 0 20px;
                background-color: rgba(64, 158, 255, .6);
                color: white;
                position: absolute;
                top: 50%;
                left: 10%;
                z-index: 19;
                transform: translateY(-50%);
            }

            .researchClass {
                box-sizing: border-box;
                border-radius: 10px;
                padding: 0 20px;
                // background-color: rgba(64, 158, 255, .6);
                color: white;
                position: absolute;
                top: 10%;
                right: 10%;
                z-index: 19;
                transform: translateY(-50%);
            }

            .searchScroll {
                max-height: 360px;
                overflow: auto;
                position: absolute;
                z-index: 1000;
                top: 20%;
                right: 10%;
                opacity: 0.8;
                width: 400px;
                background-color: azure;

                ul>li {
                    label {
                        margin-right: 20px;
                    }

                    list-style: none;
                    padding-left: 10px;
                    text-align: left;
                    cursor: pointer;
                }
            }
        }

        .title {
            box-sizing: border-box;
            padding: 10px 0;
            text-align: center;
            position: relative;
            user-select: none;

            label {
                display: inline-block;
                font-size: 18px;
                font-weight: bold;
                color: #303133;
                position: relative;
                width: 90%;
                margin: auto;
            }

            label::after,
            label::before {
                content: "";
                display: block;
                width: 24%;
                height: 2px;
                background-color: #DCDFE6;
                position: absolute;
                top: 12px;
            }

            label::after {
                right: 10%;
            }

            label::before {
                left: 10%;
            }

            i {
                cursor: pointer;
                font-size: 18px;
                position: absolute;
                top: 14px;
                right: 10px;
            }

            i:hover {
                color: #409EFF;
            }
        }

        .lineTitle {
            text-align: left;
            box-sizing: border-box;
            padding-left: 10px;
            border-left: 2px solid #409EFF;
            font-size: 14px;
            color: #606266;
        }

        .mainWarp {
            width: 81%;
            margin: 0 auto;
            margin-top: 10px;

            .module {
                min-height: 350px;
                box-sizing: border-box;
                padding: 10px;
                background-color: white;
                margin-bottom: 10px;

                .title>label {
                    width: 30%;
                }

                .moduleList {
                    box-sizing: border-box;
                    padding: 0 12px;
                    margin-top: 10px;

                    .grid-content {
                        width: 100%;
                        background-color: #F2F6FC;
                        box-sizing: border-box;
                        padding-bottom: 10px;
                        cursor: pointer;

                        .cover {
                            width: 100%;
                        }

                        label {
                            display: block;
                            font-size: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            text-align: left;
                            box-sizing: border-box;
                            padding: 0 8px;
                            cursor: pointer;
                        }

                        label.listName {
                            color: #303133;
                            margin-top: 10px;
                        }

                        label.listTime {
                            color: #909399;
                            margin-top: 10px;
                        }

                        .haveinhand {
                            color: #409EFF;
                            margin-top: 10px;
                            cursor: pointer;
                            user-select: none;
                        }
                    }

                }
            }
        }

        .researchGroup {
            width: 81%;
            margin: 0 auto;
            margin-top: 20px;
            background-color: white;

            .title>label {
                width: 30%;
            }

            .lineBanner {
                box-sizing: border-box;
                padding: 10px;

                .campusList {
                    P {
                        margin-block-start: 0;
                        margin-block-end: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #303133;
                        font-size: 14px;
                    }

                    label {
                        color: #409EFF;
                        font-size: 14px;
                    }
                }
            }
        }

        .columns {
            width: 81%;
            margin: 0 auto;
            margin-top: 20px;

            .columnsWarp {
                background-color: white;
                min-height: 325px;

                .colListWarp {
                    list-style-type: none;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    padding-inline-start: 0;
                    box-sizing: border-box;
                    padding: 0 10px;

                    .listBox {
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;

                        .fruitTitle {
                            height: 100%;
                            float: left;
                            color: #303133;
                            max-width: 81%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            cursor: pointer;

                            i {
                                display: inline-block;
                                width: 8px;
                                height: 8px;
                                background-color: #409EFF;
                                transform: rotate(-46deg);
                                margin: 0 5px;
                            }

                            label {
                                cursor: pointer;
                            }

                            label:hover {
                                color: #409EFF;
                            }
                        }

                        .time {
                            float: right;
                            color: #909399;
                        }
                    }
                }
            }
        }

        .statisticsWarp {
            background-color: white;

            .statistics {
                box-sizing: border-box;
                padding: 0 10px;
                margin-bottom: 5px;
            }

        }

        .statisticsListBox {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
            box-sizing: border-box;
            padding-left: 10px;

            .statisticsList {
                .user {
                    float: left;
                    color: #3170ec;
                    font-size: 14px;

                    span {
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        color: white;
                        background-color: #909399;
                        margin-right: 6px;
                    }
                }

                height: 30px;
                line-height: 30px;
                box-sizing: border-box;
                padding-left: 12px;
                padding-right: 10px;

                label {
                    display: block;
                    font-size: 14px;
                    color: #303133;
                }

                .statisticsText {
                    float: left;
                }

                .statisticsNum {
                    float: right;
                }
            }
        }

        .otherStatistics {
            min-height: 305px;
            box-sizing: border-box;
            padding: 10px;
            background-color: white;
            margin-top: 10px;

            &>.statisticsListBox {
                margin-top: 5px;
            }

            &>.statisticsListBox>.statisticsList {
                padding-left: 4px;
                padding-right: 0;
            }
        }

        .activeUser {
            box-sizing: border-box;
            padding: 10px;
            background-color: white;
            margin-top: 10px;

            .rankWarp {
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;
                margin-top: 5px;

                .rank {
                    box-sizing: border-box;
                    padding-left: 15px;
                    height: 40px;
                    line-height: 40px;

                    .user {
                        float: left;
                        font-size: 14px;
                        color: #303133;
                        max-width: 250px;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        cursor: pointer;

                        label {
                            cursor: pointer;
                        }

                        span {
                            display: inline-block;
                            text-align: center;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            color: white;
                            background-color: #409EFF;
                            margin-right: 6px;
                        }
                    }

                    .count {
                        float: right;
                        font-size: 14px;
                        color: #409EFF;
                    }
                }
            }
        }
    }
</style>